<template>
  <article class="container">
    <search-form ref="searchForm" :form="search" @fetchData="fetchData">
      <FormItem prop="name">
        <Input type="text" v-model="search.name" placeholder="名称关键字" />
      </FormItem>
    </search-form>
    <article class="table-data">
      <Table :columns="columns" :data="list">
        <template #permissions="{ row }">
          <Tag color="blue" v-for="(item, index) in row.permissions" v-key="index">{{item.name}}</Tag>
        </template>
        <template #menus="{ row }">
          <Timeline style="padding: 10px;">
            <TimelineItem v-for="(item, index) in row.admin_menus" v-key="index">
              <p class="time" ><Icon :type="item.icon" />{{item.name}}</p>
              <p class="content" v-if="item.children.length > 0">
                <Tag color="success" v-for="(child, i) in item.children" v-key="i">{{child.name}}</Tag>
              </p>
            </TimelineItem>
          </Timeline>
        </template>
        <template #action="{ row }">
          <rp-button icon="Icon-edit" text="修改" code="admin-opera" type="warning" @click="toPathLink('/role/edit/' + row.id)"/>
          <rp-button icon="Icon-close" text="删除" code="admin-del" type="danger" @click="handleDel(row.id)"/>
        </template>
      </Table>
      <pagination :page="page" @on-change="fetchData"/>
    </article>
  </article>
</template>
<script>
import {mapState, mapActions} from 'vuex'
import util from "@/libs/util";
import searchForm from '@/components/common/searchForm.vue'
import pagination from '@/components/common/pagination.vue'
import role from "@/api/role";

export default {
  name: 'role-index',
  components: {
    pagination,
    searchForm
  },
  data() {
    return {
      search: {
        name: ''
      },
      columns: [
        {
          title: 'ID',
          key: 'id'
        },
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Permissions',
          slot: 'permissions',
          width: 300
        },
        {
          title: 'Menus',
          slot: 'menus',
          width: 400
        },
        {
          title: 'Action',
          slot: 'action',
          width: 100,
          align: 'center'
        }
      ],
    };
  },
  computed: {
    ...mapState({
      list: state => state.role.list,
      page: state => state.role.page,
    })
  },
  mounted() {
    this.$refs.searchForm.handleSearch();
  },
  methods: {
    ...mapActions(['getRoleList']),
    // 查询
    fetchData() {
      this.getRoleList({include: 'adminMenus.children,permissions'});
    },
    // 删除
    handleDel(id) {
      util.confirm('是否确认删除？', () => {
        console.log(123);
        role.delete(id).then(() => {
          util.success('操作成功');
          this.fetchData();
        });
      })
    },
    // 跳转
    toPathLink(name) {
      this.$router.push({
        path: name
      });
    }
  }
};
</script>

<style scoped>
  .time{
    font-size: 14px;
    font-weight: bold;
  }
  .content{
    padding-left: 5px;
  }
</style>
